// 控制轮播图的切换
(function () {
    let bannerBox = document.querySelector('.banner-box');
    let left_btn = document.querySelector('.right-banner .l');
    let right_btn = document.querySelector('.right-banner .r');
    console.log(left_btn, right_btn);
    left_btn.addEventListener('click', prev);
    right_btn.addEventListener('click', next);
})();

// 上一张
function prev() {
    let bannerBox = document.querySelector('.banner-box');
    let children = bannerBox.children;
    let idx;
    for (let i = 0; i < children.length; i++) {
        if (children[i].className.indexOf('active') != -1) {
            idx = i;
        }
    }
    children[idx].className = "banner-item";
    idx = (idx + children.length - 1) % children.length;
    children[idx].className = "banner-item active";
}

// 下一张
function next() {
    let bannerBox = document.querySelector('.banner-box');
    let children = bannerBox.children;
    let idx;
    for (let i = 0; i < children.length; i++) {
        if (children[i].className.indexOf('active') != -1) {
            idx = i;
        }
    }
    children[idx].className = "banner-item";
    idx = (idx + children.length + 1) % children.length;
    children[idx].className = "banner-item active";
}

setInterval(next, 1500);

// 获取商品列表元素
let content = document.querySelector('.content');
console.log(content);
// 获取 token
let token = localStorage.getItem('token');
if (!token) {
    // 使用 a标签 进行跳转
    let a = document.createElement('a');
    a.href = '/login.html';
    a.click();
}
// 获取所有商品
fetch('http://127.0.0.1:3000/store/allGoods', {
    method: 'GET',
    headers: {
        'Authorization': token
    }
}).then((response) => {
    return response.json()
}).then((data) => {
    console.log('Success:', data);
    let all_goods_string = '';
    for (let i = 0; i < data.length; i++) {
        all_goods_string += `<div class="content-item">
                    <div class="content-top">
                        <div class="content-left-box">${ data[i].name }</div>
                        <div class="content-right-box">
                            <div>查看更多</div>
                        </div>
                    </div>
                    <div class="ct-img">
                        <div class="ct-left-img"></div>
                        <div class="ct-right-img">
        `;
        let goods_list = data[i].goods_list;
        for (let j = 0; j < goods_list.length; j++) {
            all_goods_string += `<div class="goods_item" jmp_url="/shopping-list.html?id=${ goods_list[j].id }">
                                <img src="http://127.0.0.1:3000${ goods_list[j].imgUrl }" alt="">
                                <div class="right-text">${ goods_list[j].name }</div>
                            </div>`;
        }
        all_goods_string += `</div>
                    </div>
                </div>`;
    }
    // 将后端数据渲染到页面
    content.innerHTML = all_goods_string;
    // 给每一个商品都添加点击跳转逻辑
    let goods_list = content.querySelectorAll('.goods_item');
    for (let i = 0; i < goods_list.length; i++) {
        goods_list[i].addEventListener('click', () => {
            let url = goods_list[i].getAttribute('jmp_url');
            jmp_goods(url);
        });
    }
}).catch(error => {
    console.error('Error:', error);
    alert('获取商品列表错误！');
});

function jmp_goods(url) {
    let a = document.createElement('a');
    a.href = url;
    a.click();
}